<template>
    <div :title="title" :class="divClass" @click="handleClick">
        <template v-if="key2">
            <span class="sat-one-ellipsis" style="padding-bottom: 3px"> <el-link>{{key1}}</el-link></span>
            <span class="sat-one-ellipsis" v-if="key1 != key2"> <el-link> {{key2}}</el-link></span>
        </template>
        <span v-else class="sat-two-ellipsis">
            <el-link>{{key1}}</el-link>
        </span>
    </div>
</template>


<script>
    import dayjs from 'dayjs'

    export default {
        name: "sat-row-code",
        props: {
            orderCode: {
                type: String | Number,
                required: true,
            },
            taskCode: {
                type: String | Number,
            },
            type: {
                type: String,
                required: false,
                default: 'two'
            },
            divClass: {
                type: String,
            },
            postfix: {
                type: String,
                required: false,
                default: ''
            },
            userOrderId: {
                type: String | Number ,
                default: ''
            },
            taskOrderId: {
                type: String | Number ,
                default: ''
            },
        },
        computed: {
            key1() {
                if (this.type === 'two') {
                    return this.orderCode
                } else if (this.type === 'time') {
                    return this.orderCode ? dayjs(this.orderCode).format('YY-MM-DD') : ''
                } else if (this.type === 'user') {
                    return this.orderCode ? this.orderCode.split('/')[0] : ''
                }
            },
            key2() {
                if (this.type === 'two') {
                    return this.taskCode
                } else if (this.type === 'time') {
                    return this.orderCode ? dayjs(this.orderCode).format('HH:mm:ss') : ''
                } else if (this.type === 'user') {
                    return this.orderCode ? this.orderCode.split('/')[1] : ''
                }
            },
            title() {
                return `${this.key1} ${this.key2 || ''}`
            }
        },
        methods: {
            async handleClick() {
                await this.$store.dispatch('_goHistoryServiceRoute', {
                    userOrderId: this.userOrderId,
                    postfix: this.postfix || '',
                    taskOrderId: this.taskOrderId || '',
                    userOrderCode: this.orderCode || '',
                    onlyShow: 1
                })
            }
        }
    }
</script>

<style>
    .sat-one-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .sat-two-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .el-link.is-underline:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 0;
        bottom: 0;
        border-bottom: 0.05rem solid #606266;
    }
    .el-link.is-underline:hover:after {
        border-bottom: 0.05rem solid #047bb9 !important;
    }
    .el-link.el-link--default:after {
        border-color: #606266 !important;
    }
</style>